<template>
    <view>
		<date-range-picker></date-range-picker>
        <view class="uni-flex row">
            <!-- <view class="input-search">
                <input type="text" value placeholder="检索签约室" />
                <iconfont icon="search" :size="20" color="#999"></iconfont>
            </view> -->
			<!-- <view class="create-sign-btn" @click="createSign" hover-class="item-hover">创建签约室</view> -->
			<view class="cu-bar search bg-white margin-top-sm">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="检索签约室" confirm-type="search"></input>
				</view>
				<view class="action">
					<button class="cu-btn bg-green shadow-blur round"  @tap="showModal" data-target="DialogModal">创建签约室</button>
				</view>
			</view>
        </view>
		
		<view class="cu-modal" :class="modalName=='DialogModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">创建签约室</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<!-- <view class="padding-xl">
					Modal 内容。
				</view> -->
				<view class="cu-form-group ">
					<view class="margin-right text-gray">名称:</view>
					<input type="text" style="border: 1px solid #ddd; padding: 0 10px; border-radius: 10px; text-align: left;" v-model="newSiginRoomName"></input>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="createSign()">确定</button>
					</view>
				</view>
			</view>
		</view>
		
		<!-- <view class="uni-list">
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in list" :key="key">
				<view class="uni-media-list">
					<view class="uni-media-list-logo">
						<image :src="value.img" ></image>
					</view>
					<view class="uni-media-list-body">
						<view class="uni-media-list-text-top">创建时间：{{value.careteDate}}</view>
						<view class="uni-media-list-text-bottom uni-ellipsis" style="width:calc(100% - 200upx)">{{value.content}}</view>
					</view>
					<view class="dissolve" @click="dissolveSign(value)" >解散签约室</view>
				</view>
			</view>
		</view> -->

		<view class="cu-list menu-avatar margin-top" >
			<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in list" :key="index"
			 @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index"
			  @click="toSignRoom(item.name)">
				<view class="cu-avatar round lg" :style="[{backgroundImage:`url(${item.img})` }]"></view>
				<view class="content">
					<view class="text-cut">{{item.name}} </view>
					<!-- <view class="text-gray text-sm">
						<text class="cuIcon-infofill text-red  margin-right-xs"></text>
						{{item.content}}
					</view> -->
					<view class="text-gray text-sm flex"> <view class="text-cut">{{item.content}}</view></view>
				</view>
				<view class="action date-label">
					<view class="text-grey text-sm">{{item.careteDate}}</view>
					<!-- <view class="cu-tag round bg-grey sm">5</view> -->
				</view>
				<view class="move">
					<!-- <view class="bg-grey">置顶</view> -->
					<view class="bg-red" @click.stop="dissolveSign(item)">解散签约室</view>
				</view>
			</view>
		</view>
		
		<pagination 
			:current-page="currentPage" 
			:page-size="pageSize"
			@current-change="pageChange"
			:total="total"
		></pagination>
		
    </view>
</template>

<script>
import iconfont from "@/components/iconfont/inconfont.vue";
import DateRangePicker from "@/components/date-range-picker/date-range-picker.vue";
import pagination from '@/components/pagination/pagination'
export default {
    components: {
        iconfont,
		pagination,
        DateRangePicker
    },
    data() {
        return {
			CustomBar: this.CustomBar,
			modalName: null,
			listTouchStart: 0,
			listTouchDirection: null,
			newSiginRoomName: '',
			currentPage: 1,
			pageSize: 10,
			total: 123,
			list: [
				{
					careteDate: "2019年6月23日",
					content: "张三、李四等成员",
					name: "唐老鸭签约室",
					img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90"
				},
				{
					careteDate: "2018年12月12日",
					content: "夏天、冬天、取暖。",
					name: "梦幻签约室",
					img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90"
				},
				{
					careteDate: "2018年10月6日",
					content: "张三、李四等成员",
					name: "璐璐签约室",
					img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90"
				},
				{
					careteDate: "2019年6月23日",
					content: "张三、李四等成员",
					name: "唐老鸭签约室",
					img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90"
				},
				{
					careteDate: "2018年12月12日",
					content: "夏天、冬天、取暖。",
					name: "梦幻签约室",
					img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90"
				},
				{
					careteDate: "2018年10月6日",
					content: "张三、李四等成员",
					name: "璐璐签约室",
					img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90"
				},
				{
					careteDate: "2019年6月23日",
					content: "张三、李四等成员",
					name: "唐老鸭签约室",
					img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90"
				},
				{
					careteDate: "2018年12月12日",
					content: "夏天、冬天、取暖。",
					name: "梦幻签约室",
					img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90"
				},
				{
					careteDate: "2018年10月6日",
					content: "张三、李四等成员",
					name: "璐璐签约室",
					img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90"
				},
				{
					careteDate: "2019年6月23日",
					content: "张三、李四等成员",
					name: "唐老鸭签约室",
					img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90"
				},
				{
					careteDate: "2018年12月12日",
					content: "夏天、冬天、取暖。",
					name: "梦幻签约室",
					img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90"
				},
				{
					careteDate: "2018年10月6日",
					content: "张三、李四等成员",
					name: "璐璐签约室",
					img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90"
				},
				{
					careteDate: "2019年6月23日",
					content: "张三、李四等成员",
					name: "唐老鸭签约室",
					img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90"
				},
				{
					careteDate: "2018年12月12日",
					content: "夏天、冬天、取暖。",
					name: "梦幻签约室",
					img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90"
				},
				{
					careteDate: "2018年10月6日",
					content: "张三、李四等成员",
					name: "璐璐签约室",
					img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90"
				},
				
			]
		};
    },
	methods: {
		pageChange(val) {
			this.currentPage = val;
		},
		showModal(e) {
			this.modalName = e.currentTarget.dataset.target;
		},
		hideModal(e) {
			this.modalName = null
		},
		// ListTouch触摸开始
		ListTouchStart(e) {
			this.listTouchStart = e.touches[0].pageX
		},

		// ListTouch计算方向
		ListTouchMove(e) {
			this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
		},

		// ListTouch计算滚动
		ListTouchEnd(e) {
			if (this.listTouchDirection == 'left') {
				this.modalName = e.currentTarget.dataset.target
			} else {
				this.modalName = null
			}
			this.listTouchDirection = null
		},
		// 创建签约
		createSign () {
			// uni.showModal({
			// 	title: '阿斯顿立方空间',
			// 	content: '<b>sadfas</b>',
			// 	// showCancel: false,
			// 	// cancelText: '',
			// 	// confirmText: '',
			// 	success: res => {
			// 	},
			// 	fail: () => {},
			// 	complete: () => {}
			// });
			let name = this.newSiginRoomName;
			uni.navigateTo({
				url:'/pages/sign-create/sign-create'
			})
		},
		// 解散签约
		dissolveSign (sign) {
			
		},
		toSignRoom (name) {
			uni.navigateTo({
				url:"/pages/sign-create/sign-create?sign_room_name=" +  name
			})
		}
	}
};
</script>

<style scoped>
.date-label {
	width: 182upx !important;
}
</style>
